 /* "test": "echo \"Error: no test specified\" && exit 1" */
 const gulp = require("gulp");

 // 配置 服务器 gulp-connect ;
 const connect = require("gulp-connect");
 // 配置 gulp-htmlmin html 压缩插件 ;
 const htmlmin = require("gulp-htmlmin");
 // 配置  gulp-cssmin css 压缩插件 ;
 const sass = require("gulp-sass")(require('sass'));
 const cssmin = require("gulp-cssmin");
 // 配置 JS 压缩与ES6转ES5插件 ;
 const uglify = require("gulp-uglify");
 const babel = require("gulp-babel");

 // 测试 gulp 运行   创建 自定义测试命令  "sayhi" ;
 gulp.task("sayhi", async() => {
     console.log("Gulp 指令 , --- 测试,执行成功了!");
 });

 // 配置 gulp 服务器 创建 自定义 服务器命令 "connenct" ;
 gulp.task("connect", async() => {
     connect.server({
         // root: "./dist",
         // port: 8899,
         livereload: true
     });
 });

 gulp.task("html", async() => {
     gulp.src(["./src/**/*.html"])
         .pipe(gulp.dest("./dist/"))
         .pipe(connect.reload());
 });

 // 配置 gulp-htmlmin 插件 创建命令 "html-min" ;
 gulp.task("html-min", async() => {
     gulp.src(["./src/**/*.html"])
         .pipe(htmlmin({ collapseWhitespace: true }))
         .pipe(gulp.dest("./dist/"))
         .pipe(connect.reload());
 });

 gulp.task("scss", async() => {
     gulp.src(["./src/scss/**/*.scss"])
         .pipe(sass().on('error', sass.logError))
         .pipe(gulp.dest("./dist/css/"))
         .pipe(connect.reload());
 });

 // 配置 gulp- css-min 插件 创建命令 "scss-min" ;
 gulp.task("scss-min", async() => {
     gulp.src(["./src/scss/**/*.scss"])
         .pipe(sass().on('error', sass.logError))
         .pipe(cssmin())
         .pipe(gulp.dest("./dist/css/"))
         .pipe(connect.reload());
 });

 gulp.task("javascripts", async() => {
     gulp.src(["./src/javascripts/**/*.js"])
         .pipe(gulp.dest("./dist/javascripts"))
         .pipe(connect.reload());
 });

 // 配置 uglify JS压缩插件
 gulp.task("javascripts-min", async() => {
     gulp.src(["./src/javascripts/**/*.js"])
         .pipe(uglify())
         .pipe(gulp.dest("./dist/javascripts"))
         .pipe(connect.reload());
 });

 // 配置  JS ES6转ES5 插件 ;
 gulp.task("javascripts-babel", async() => {
     gulp.src(["./src/javascripts/**/*.js"])
         .pipe(babel({
             presets: ['@babel/env']
         }))
         .pipe(uglify())
         .pipe(gulp.dest("./dist/javascripts"))
         .pipe(connect.reload());
 });

 gulp.task("watch", async() => {
     gulp.watch(["./src/**/*.html"], gulp.parallel("html"));
     gulp.watch(["./src/scss/**/*.scss"], gulp.parallel("scss"));
     gulp.watch(["./src/javascripts/**/*.js"], gulp.parallel("javascripts"));
 });

 gulp.task("default", gulp.series("html", "scss", "javascripts", gulp.parallel("connect", "watch")));

 gulp.task("build", gulp.series("html-min", "scss-min", "javascripts-min"));


 // 配置服务器
 // gulp服务器默认打开根目录下的index.html文件; 
 // 根目录设置; 
 // 端口号设置
 // 自动刷新设置 ;

 // 转存成功之后自动刷新服务器 ; 
 // 1. 新增一个html功能，可以转存src之中的所有.html 文件; 
 // 转存结束后要调用 reload 方法配合页面刷新; 
 // uglify 在某些场景下压缩 babel转义之后的代码会发生报错; 
 // - 如果遇到这种情况， 我们暂时只能两个插件二选一; 

 // 2. 我们在开启服务器之后命令行就不能输入新的指令了 , 提前做好html指令调用的逻辑
 // 3. 我们如何同时开启watch和connect两个指令; 

 // 配置自动监听
 // -1 添加 watch 指令;
 // -2 找到监听的文件目标;
 // -3 监听目标文件改变, 要执行的命令;